<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>通讯录</title>
		<meta http-equiv="Pragma" content="no-cache" />
		<%@ include file="/user_comm.jsp"%>
	<link href="<%=request.getContextPath()%>/css/prop.css" type="text/css" rel="stylesheet"/>
	<style>
.setpage
{
	float:right;
	margin-top:5px;
	margin-right:5px;
	border:1px solid #d0d7e5;
	padding:5px;
}
.setpage a:link,.setpage a:visited,.setpage a:hover,.setpage .current,.setpage #info{ 
    border:1px solid #DDD; 
    background:#F2F2F2; 
    display:inline-block; 
    margin:1px; 
    text-decoration:none; 
    font-size:12px; 
    width:15px; 
    height:15px; 
    text-align:center; 
    line-height:15px; 
    /*color:#AAA; */
    color:#0072bc;
    padding:1px 2px; 
} 
.setpage a:hover{ 
    border:1px solid #E5E5E5; 
    background:#F9F9F9; 
} 
.setpage .current{ 
    border:1px solid #83E7E4; 
    background:#DFF9F8; 
    margin:1px; 
    color:#27CBC7; 
} 
.setpage #info{ 
    width:auto; 
} 
</style>
	<script src="<%=request.getContextPath()%>/js/pageBar.js" language="JavaScript"></script>
	<script src="<%=request.getContextPath()%>/js/contact.js" language="JavaScript"></script>
	
	</head>
	<body>
		<div class="realRight ml10 l_bar">
					<div class="mybox">
						<div class="mytit">
							通讯录
						</div>
						<div class="con Orbuy">
							<form name="formpage">
								<div class="pCenter">
									<div>
										<table>
											<tr>
												<td colspan="2">
													<div id="div_toolbar1"
														class="pagesMag mt10 clearfix newsPag"
														style="border-top: 1px solid #dfdfdf;">
														<p class="magtab">
															
															<span class="magspan ml5" style="width:170px">
															<!-- 快速搜索框  
															<input id="searchBox" name="searchBox" maxlength="20"
															size="20" type="text" />
															-->
															</span>
															
															<a id="a_editGroup" class="at_but b_2_g" href="#"
																onclick="editGroup();"> <u></u>编辑组 </a>
															<a id="a_deleteGroup" class="at_but b_2_g" href="#"
																onclick="delGroup();"> <u></u>删除组 </a>
															<a id="a_editMember" class="at_but b_2_g" href="#"
																onclick="editMember();"> <u></u>编辑联系人 </a>
															<a href="#" class="at_but b_2_g" onclick="addMember();">
																<u></u>新建联系人 </a>
															<a id="a_delMember" class="at_but b_2_g" href="#"
																onclick="delMember()"> <u></u>删除联系人 </a>
														</p>
													</div>
													<div id="div_goBack1" style="display: none;">
														<!-- 
														<a href="#" class="at_but b_2_g" onclick="goBack()"> <u></u>返回
														</a>
														 -->
													</div>
												</td>
											</tr>
											<tr>
												<td width="200" valign="top">
													<div style="border: 1px solid #c5ddf6;padding:5px;" >
														<span id="spanGroups"> </span>
													<br />
													<a href="#" onclick="addGroup();"> 新建组 </a>
													</div>
												</td>
												<td width="650" valign="top">
													<!-- 联系人列表 start -->
													<div id="div_memberlist" style="display: block;">
														<table class="favorRwList mt5" id="tb_memberList">
														</table>
													</div>
													<div id="setpage" style="width:630px"></div>
													<div id="div_selMember" style="width:570px" align="center">
														<br/>
														<a id="a_selMember" class="at_but b_2_g" href="#"
																onclick="selMember()"> <u></u>确&nbsp;&nbsp;定</a>
													</div>
													<!-- 联系人列表 end -->

													<!-- 新增/修改 联系组 start -->
													<div id="div_editgroup" style="display: none;">
														<h2>
															<span class="l"></span><label id="lb_editGroup">新建联系人分组</label>
															<span class="r"></span>
														</h2>
														<div>
															&nbsp;组名：
															<input id="txtGroupName" type="text" maxlength="20"
																size="25" onblur="checkGroupName(this);" />
															<span id="groupNameError"></span>
														</div>
														<div>
															<table border="0" width="500" cellspacing="5" cellpadding="0">
																<tr>
																	<td align="left" colspan="3">
																		可选联系人：
																	</td>
																</tr>
																<tr>
																	<td align="left">
																		<select id="myGroups" style="width: 200px">
																		</select>
																	</td>
																	<td>
																	</td>
																	<td align="left">
																		已选联系人
																	</td>
																</tr>
																<tr>
																	<td>
																		<select multiple="multiple" size="13" id="list1"
																			style="width: 200px">
																		</select>
																	</td>
																	<td width="100" align="center">
																		<input type="button" value="   >>   " id="btnAdd" />
																		<br />
																		<br />
																		<input type="button" value="   <<   " id="btnRemove" />
																	</td>
																	<td>
																		<select multiple="multiple" size="13" id="list2"
																			style="width: 200px">
																		</select>
																	</td>
																</tr>
															</table>

															<p>
																按住Ctrl键可以多选，shift键可选择范围，双击可以直接添加。
															</p>
															<p class="formAction">
																<input type="button" class="button" id="ok" name="ok"
																	value=" 保 存 " onclick="saveGroup();" />
																&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
																<input type="button" class="button" id="resets"
																	value=" 取 消 " onclick="goBack();" />
															</p>
														</div>
													</div>
													<!-- 新增/修改 联系组 end -->

													<!-- 新增/修改 联系人 start -->
													<div id="div_editmember" style="display: none;">
														<h2>
															<span class="l"></span><label id="lb_editMember">新建联系人</label>
															<span class="r"></span>
														</h2>
														<table class="basicInfor">
															<tr id="tr_companyName">
																<th>
																	公司名称：
																</th>
																<td>
																	&nbsp;<span id="lb_companyName"/>
																</td>
															</tr>
															<tr>
																<th>
																	账户代码：
																</th>
																<td class="fc9">
																	&nbsp;<input id="txtUserId" type="text" maxlength="20"
																		size="25" class="required" title="*必填"
																		onblur="checkUserId(this);" />
																	<span id="userIdError"></span>
																</td>
															</tr>
															<tr>
																<th>
																	姓名：
																</th>
																<td class="fc9">
																	&nbsp;<input id="txtUsername" type="text" maxlength="20"
																		size="25" />
																</td>
															</tr>
															<tr>
																<th>
																	电话：
																</th>
																<td class="fc9">
																	&nbsp;<input id="txtTelephone" type="text" maxlength="20"
																		size="25" />
																</td>
															</tr>
															<tr>
																<th>
																	电子邮箱：
																</th>
																<td class="fc9">
																	&nbsp;<input id="txtEmail" type="text" maxlength="50"
																		size="40" />
																</td>
															</tr>
															<tr>
																<th>
																	备注：
																</th>
																<td class="fc9">
																	&nbsp;<input id="txtRemark" type="text" maxlength="30"
																		size="30" />
																</td>
															</tr>
															<tr>
																<th valign="top">
																	所属组：
																</th>
																<td>
																	<div id="div_groups"></div>
																</td>
															</tr>	
															<tr>
																<th></th>
																<td>
																	<!-- <a href="javascript:void(0);" class="at_but b_1_y" id="reg_sub"><u></u>确认</a>  -->
																	<input type="button" class="button" id="ok" name="ok"
																		value=" 保 存 " onclick="saveMember();" />
																	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
																	<input type="button" class="button" id="resets"
																		value=" 取 消 " onclick="goBack();" />
																</td>
															</tr>
														</table>
													</div>
													<!-- 新增/修改 联系人 end -->

													<!-- 查看 联系人 start -->
													<div id="div_viewmember" style="display: none;"  class="con">
														<div>
														<h2>
															<span class="l"></span>查看联系人
															<span class="r"></span>
														</h2>
														<table class="basicInfor">
															<tr>
																<th>
																	公司名称：
																</th>
																<td>
																	<span id="spanCompanyName" />
																</td>
															</tr>
															<tr>
																<th>
																	账户代码：
																</th>
																<td>
																	<span id="spanUserid" />
																</td>
															</tr>

															<tr>
																<th>
																	姓名：
																</th>
																<td>
																	<span id="spanUsername" />
																</td>
															</tr>
															<tr>
																<th>
																	电子邮箱：
																</th>
																<td>
																	<span id="spanEmail" />
																</td>
															</tr>

															<tr>
																<th>
																	电话：
																</th>
																<td>
																	<span id="spanTelephone" />
																</td>
															</tr>
															<tr id="tr_memberInfo2">
																<th>
																	备注：
																</th>
																<td>
																	<span id="spanRemark" />
																</td>
															</tr>

															<tr id="tr_memberInfo3">
																<th>
																	所属组：
																</th>
																<td>
																	<span id="spanInGroups" />
																</td>
															</tr>
														</table>
														</div>
													</div>
													<!-- 查看 联系人 end -->

												</td>
											</tr>
											<tr>
												<td width="150"></td>
												<td>
													<div id="div_toolbar2">
														
													</div>

													<div id="div_goBack2" style="display: none;">
														&nbsp;&nbsp;<a href="#" onclick="goBack()" >返回</a>
													</div>
												</td>
											</tr>
										</table>
									</div>
								</div>
							</form>
						</div>
					</div>
					<div>
					</div>
					<!--主体部分end-->
				</div>
	</body>
</html>
